<template>
  <div class="dashboard-container">
    <el-divider></el-divider>
    <div style="height: 50px;background-color: #f1f4f7;line-height: 50px">
      <el-tag style="margin-left: 30px" size="large" type="danger">TCE项目</el-tag>
      <span style="margin-left: 30px;color: #606266">{{ projectInfo.title }}</span>
    </div>
    <div>
      <el-descriptions class="margin-top-30px" :column="2">
        <template slot="extra">
<!--          <el-button type="primary" size="small">操作</el-button>-->
        </template>
        <el-descriptions-item label="项目状态">{{ projectInfo.status }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ projectInfo.founderName }}</el-descriptions-item>
        <el-descriptions-item label="起始时间">{{ projectInfo.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ projectInfo.endTime }}</el-descriptions-item>
        <el-descriptions-item label="成员人数">{{ projectInfo.peopleNumber }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!--  项目描述  -->
    <div class="margin-top-30px">
      <p class="title-blue">项目描述</p>
      <el-divider></el-divider>
      <p class="text-color">{{ projectInfo.proDescribe }}</p>
    </div>
    <!--  项目模块  -->
    <div class="margin-top-30px">
      <p class="title-blue">项目模块</p>
      <el-divider></el-divider>
      <p class="text-color"><span style="margin-left: 5px" v-for="item in projectInfo.module">{{ item }};</span></p>
    </div>
    <!--  项目文档  -->
    <div class="margin-top-30px">
      <p class="title-blue">项目文档</p>
      <el-divider></el-divider>
      <div class="text-color">
        <p v-for="file in fileList"><svg-icon icon-class="doument"></svg-icon><span class="margin-left-10px">{{ file.fileName }}</span><a @click="downloadFile(file)" class="title-blue margin-left-10px">下载</a></p>
      </div>
    </div>
    <!--  缺陷流程  -->
    <div class="margin-top-30px">
      <p class="title-blue">缺陷流程</p>
      <el-divider></el-divider>
      <p class="text-color">{{ projectInfo.process }}</p>
    </div>
  </div>
</template>

<script>
  import { getFiles } from '@/api/bug'
  import { getProjectFiles } from '@/api/project-file'

  export default {
    name: 'proInformation',
    props:{
      projectInfo:{
        type: Object,
        require: true
      }
    },
    data(){
      return{
        fileList: [],                    //附件集合
      }
    },
    methods:{
      //获取项目文件集合的方法
      getProjectFile(){
        let page = {"current":1,"size":1000}
        getProjectFiles(page,this.projectInfo.id).then(res =>{
          if (res.data.records.length !== 0){
            this.fileList = res.data.records
          }
        })
      },
      //下载附件
      downloadFile(file){
        // let filePath = encodeURI(file.fileLocalPath)
        // let filePath = 'http://101.35.123.53/document/231119009许世烽-学党史.docx'
        window.open(file.fileAccessPath,'_blank')
      }
    },
    mounted(){
      this.getProjectFile()
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-container {
    margin-top: -24px;
  }
  .margin-top-30px{
    margin-top: 30px;
  }
  .title-blue{
    color: #0293f9;
    font-size: 90%;
  }
  .text-color{
    color: #606266;
  }

  .margin-left-10px{
    margin-left: 10px;
  }

  /* el-divider 修改高度&虚线效果 */
  .margin-top-30px .el-divider--horizontal{
    margin: 8px 0;
  }
</style>
